<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            <link rel="stylesheet" href="../css/cindy.css">


            </head>

	<body style="font-family:Arial;">

        <h1>CindyJS: Euler-Line with Snap and Grid</h1>

        <script id='init' type='text/x-cindyscript'>
              ne=E-A;
              ne=ne/|ne|*.5;
              nf=F-D;
              nf=nf/|nf|*.5;
        </script>

        <script id='csmove' type='text/x-cindyscript'>

A.xy=(1,A.y);
B.xy=(2,B.y);
C.xy=(3,C.y);
D.xy=(4,D.y);
            if(mover()==E,
              ne=E-A;
              ne=ne/|ne|*.5;
            );
            ee=A+ne;
            if(mover()==F,
              nf=F-D;
              nf=nf/|nf|*.5;
            );
            errc(nf);
            ff=D+nf;
            E.xy=ee;
            F.xy=ff;



h1=(E-A).y/(E-A).x;
h2=(F-D).y/(F-D).x;


m=[
[1,1,1,1,0,0,0,0,0,0,0,0],
[8,4,2,1,0,0,0,0,0,0,0,0],
[0,0,0,0,8,4,2,1,0,0,0,0],
[0,0,0,0,27,9,3,1,0,0,0,0],
[0,0,0,0,0,0,0,0,27,9,3,1],
[0,0,0,0,0,0,0,0,64,16,4,1],
[3,2,1,0,0,0,0,0,0,0,0,0],
[12,4,1,0,-12,-4,-1,0,0,0,0,0],
[0,0,0,0,27,6,1,0,-27,-6,-1,0],
[0,0,0,0,0,0,0,0,48,8,1,0],
[12,2,0,0,-12,-2,0,0,0,0,0,0],
[0,0,0,0,18,2,0,0,-18,-2,0,0]
];

v=[A.y,B.y,B.y,C.y,C.y,D.y,h1,0,0,h2,0,0];
a=linearsolve[m,v];
plot[x^3*a_1+x^2*a_2+x*a_3+a_4,start->1,stop->2,size->3];
plot[x^3*a_5+x^2*a_6+x*a_7+a_8,start->2,stop->3,size->3];
plot[x^3*a_9+x^2*a_10+x*a_11+a_12,start->3,stop->4,size->3];



        </script>


        <div  id="CSCanvas" style="width:500px; height:500px; border:2px solid #000000"></div>

        <script type="text/javascript">

            var gslp=[

                      {name:"A", type:"Free", pos:[1,1],color:[1,0,0]},
                      {name:"B", type:"Free", pos:[2,2],color:[1,0,0]},
                      {name:"C", type:"Free", pos:[3,-1],color:[1,0,0]},
                      {name:"D", type:"Free", pos:[4,0],color:[1,0,0]},
                      {name:"c", type:"CircleMr", args:["A"],radius:0.5,color:[0,0,0]},
                      {name:"d", type:"CircleMr", args:["D"],radius:0.5,color:[0,0,0]},
                      {name:"E", type:"Free", pos:[0,2],color:[1,1,0],size:3},
                      {name:"F", type:"Free", pos:[5,2],color:[1,1,0],size:3},
                      {name:"s", type:"Segment", args:["A","E"],color:[0,0,0],size:1},
                      {name:"t", type:"Segment", args:["D","F"],color:[0,0,0],size:1}


                      ];
            CindyJS({canvasname:"CSCanvas",
                        defaultAppearance: {clip: "inci", overhangLine: 1.2},
                        movescript:"csmove",
                        initscript:"init",
                        geometry:gslp,
                        transform:[{scale:3},{translate:[-3,0]}],
                        grid:1
                        });

        </script>

	</body>
</html>
